<template>
  <el-button type="primary" @click="dialogFormVisible=true">添加学生</el-button>
  <el-table :data="students" style="width: 100%">
    <el-table-column label="学号" prop="id" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="年龄" prop="age" />
    <el-table-column label="性别" prop="gender" />
    <el-table-column label="身份证号" prop="idcard" />
    <el-table-column label="地址" prop="address" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="keyword" size="small" placeholder="搜索学生" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="editStudent(scope.row)">
          编辑
        </el-button>
        <el-button
            size="small" type="danger" @click="deleteStudent(scope.row)">
          删除
        </el-button>
        <!--    学生编辑对话框-->
        <el-dialog  v-model="dialogFormVisible" :modal="false"  title="学生信息" width="500" @close="this.student={}">
          <el-form :model="student">
            <el-form-item label="姓名" >
              <el-input v-model="student.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" >
              <el-input v-model="student.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" >
              <el-input v-model="student.gender" autocomplete="off" />
            </el-form-item>
            <el-form-item label="身份证号" >
              <el-input v-model="student.idcard" autocomplete="off" />
            </el-form-item>
            <el-form-item label="籍贯" >
              <el-input v-model="student.address" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="saveStudent">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>
      </template>

    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="total"
                 :page-size="pageSize" @current-change="loadStudent"/>

</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name:"StudentView",
  data(){
    return{
      students:[],//学生集合
      keyword:'',
      current:1,//当前页码
      pageSize:10,//页大小
      total:10,//总数
      dialogFormVisible: false,  //对话框是否显示
      student: {} //当前学生
    }
  },
  methods:{
    loadStudent(current){
      this.current=current
      this.$axios.get('/findStudentPage?current='+this.current+"&pageSize="+this.pageSize)
          .then(result => {
            console.log('student',result.data);
            if(result.data.code ===200){
              this.students = result.data.data.data;
              this.total = result.data.data.total;
            }
          })
    },
    //编辑学生
    editStudent(stu){
      this.dialogFormVisible = true;
      //学生回显效果  stu --> string ---> 对象 深克隆
      this.student = JSON.parse(JSON.stringify(stu));
    },
    //保存学生
    saveStudent(){
      //通过id是否存在来判断是做添加还是更新
      if(this.student.id){
      //调用更新学生的servlet
      this.$axios.post('/updateStudent',this.$qs.stringify(this.student))
          .then(result => {
            console.log('save',result.data)
            if(result.data.code ===200) {
              ElMessage.success("更新成功")
            //更新学生信息
            this.loadStudent(this.current)
            }
      })
      this.dialogFormVisible = false;
      } else{
        //调用更新学生的servlet
        this.$axios.post('/addStudent',this.$qs.stringify(this.student))
            .then(result => {
                  console.log('save',result.data)
                  if(result.data.code ===200) {
                    ElMessage.success("添加成功")
                    //更新学生信息
                    this.loadStudent(this.current)
                  }
            })
      }
      this.dialogFormVisible = false;
    },
    //删除学生
    deleteStudent(stu){
      this.$confirm('是否确认删除该学生？','提示',{
        confirmButtonText :'确认',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        console.log('stu',stu)
        //从后台删除学生
        this.$axios.post('/deleteStudent',"id="+stu.id)
            .then(result=>{
              if(result.data.code ===200){
                //刷新本页
                this.loadStudent(this.current)
              }
            })
      }).catch(() => {
        this.$message({
          type:'info',
          message:'已取消删除'
        });
      });
    }
  },
  //组件挂载完成后调用加载学生方法
  mounted() {
    this.loadStudent(1);
  }
}
</script>

